<!-- 
 * @Description:
 * @Date: 2024-06-25 21:24:10
 * @LastEditTime: 2024-07-04 08:45:36
-->
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '已完成',
  },
}
</route>
<template>
  <view class="bg-#fff overflow-auto w-100% h-screen mt-20rpx box-border p-20rpx">
    <view v-for="item in completedList" :key="item.id">
      <view class="flex items-center justify-between" @click="handleCompleted(item)">
        <view>
          <view class="mb-30rpx tobe-title">{{ item.title }}</view>
          <view class="tobe-time">
            {{ formatTime(item.createTime, 'yyyy-MM-dd HH:mm') }}
          </view>
        </view>
        <view class="w-156rpx h-120rpx">
          <image :src="item.coverImage"></image>
        </view>
      </view>
      <view class="tobe-line"></view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { formatTime } from '@/utils/index'
const completedList = ref([])
const handleCompleted = (val) => {
  const params = reactive({
    id: val.id,
  })
  uni.navigateTo({
    url: `/pages/PartyBuilding/CompletedDetail?id=${params.id}`,
  })
}
const props = defineProps({
  completedItems: {
    type: Array,
  },
})
watch(
  () => props.completedItems,
  (val) => {
    if (val) {
      completedList.value = [...val]
    }
  },
  { immediate: true },
)
onLoad(() => {})
</script>
<style lang="scss">
.tobe-title {
  font-size: 28rpx;
  color: rgba(0, 0, 0, 1);
  text-align: left;
}
.tobe-time {
  font-size: 26rpx;
  color: rgba(146, 146, 146, 1);
  text-align: left;
}
.tobe-line {
  margin: 20rpx 0;
  border-bottom: 2rpx solid #ccc;
}
</style>
